transition　と　transform　の関係性を理解するのに苦労したので 理解の仕方を投稿します。

アニメーションを勉強したとき、 animation @keyframes そして、transition　と　transform　の４個の言葉が出てきました

今回は、transition　と　transform　はどんな役割なのか？を書いていきます

transition　と　transform　はセットで覚えた方が良い。 役割としては、『変更前』と『変更後』の中間を補完する役割があります

・transition-duration 変化が始まって終わるまでの時間を指定 ・transition-property　変化が適用されるｃｓｓのプロパティを指定 ・transition-timing-function　変化の度合いを指定 ・transition-delay　変化が始まる時間を指定 ・transition　上記４つのプロパティを一括で指定

transitionで、アニメーション時間、開始前後の時間、アニメーション回数などを決めるプロパティ

translate() 移動 rotate() 回転 scale() 移動 skew() 傾斜 perspective() 遠近感 transform-origin変形する基点を設定するプロパティ transform-style2D・3Dの表示を設定するプロパティ perspective遠近感を設定するプロパティ perspective-origin遠近感の基点を設定するプロパティ

transform　で、変形を設定する役割を決めるプロパティ

ボタンをhoverしたとき、アニメーションするcodeを書いてみます。

codepenでの記述↓↓↓

See the Pen ExWjgwz by トモゑ☛Web作成の37🌺 (@swan2pink) on CodePen.

変更前にtransition　を設定する 変更後にtransform　を設定する

transition　は変更前に設定する transform　変更後を設定する

紛らわしいプロパティですが、引き続き理解していきたいと思います 今回は以上です ありがとうございます！！